<template>
  <div>
    <el-container>
      <el-header>懂你 汽车品牌推荐</el-header>
      <el-main>
        <div style="margin-top: 15px;width: 40%;margin-left: 30%;">
          <el-input placeholder="请输入品牌、车型" prefix-icon="el-icon-search" v-model="keyword" @keyup.enter.native="search">
          </el-input>
        </div>
        <div class="demo-image__placeholder">
          <div v-for="item in car_list" :key="item.id" class="text item" style="padding-left: 8%;">
            <div style="float: left;">
              <el-image :src="item.img" style="width: 220px;margin: 15px;height: 150px;">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
              <div>
                <el-link type="success" v-on:click="to_detail(item.id);">{{item.brand}}</el-link>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: "",
        car_list: []
      };
    },
    methods: {
      search() {
        this.getCars(this.keyword);
      },
      getCars(keyword) {
        this.$axios.get("/api/get_car_list", {
          params: {
            "keyword": keyword
          }
        }).then(response => {
          if (response.data.car_list) {
            this.car_list = response.data.car_list;
          }
        });
      },
      to_detail(carid) {
        this.$router.push({
          path: '/detail',
          query: {
            "id": carid
          }
        });
      }
    },
    created() {
      this.getCars("");
    }

  };
</script>

<style scoped>
  .el-header,
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    font-size: x-large;
    text-align: left;
    padding-left: 10%;
    background-color: #ed0918;
    color: #e9eef3;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    height: 100vh;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
